<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="学科名称">
            <el-input v-model="formInline.user"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button>清除</el-button>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
          </el-form-item>
          <el-button type="success" style="float: right" icon="el-icon-edit"
            >新增学科</el-button
          >
        </el-form>
        <el-row class="grid-content bg-purple-light" type="flex" align="middle"
          ><i class="el-icon-info"></i>数据一共{{ this.totals }}条</el-row
        >
        <el-table :data="listDate" style="width: 100%">
          <el-table-column
            prop="creatorID"
            label="序号"
            type="index"
            width="80"
          >
          </el-table-column>
          <el-table-column prop="subjectName" label="学科名称" width="120">
          </el-table-column>
          <el-table-column prop="username" label="创建者" width="120">
          </el-table-column>
          <el-table-column prop="addDate" label="创建日期" width="180">
            <template #default="{ row }">
              {{ dateFormat(row.createTime) }}
            </template>
          </el-table-column>
          <!-- 显示 -->
          <el-table-column prop="isFrontDisplay" label="前台是否显示" width="110">
          </el-table-column>
          <el-table-column prop="twoLevelDirectory" label="二级目录" width="110">
          </el-table-column>
          <el-table-column prop="tags" label="标签" width="110">
          </el-table-column>
          <el-table-column prop="totals" label="题目数量" width="110">
          </el-table-column>
          <el-table-column label="操作">
            <template #default="{row}">
              <el-button
              type="text"
              size="small"
              @click="toDirectory(row.id)"
              >学科分类</el-button
            >
            <el-button type="text" size="small" @click="toTags(row.id)"
              >学科标签</el-button
            >
            <el-button type="text" size="small">修改</el-button>
            <el-button type="text" size="small">删除</el-button>
            </template>

          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-row type="flex" justify="end" align="middle" style="height: 60px">
          <el-pagination
            :current-page="params.page"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-size="params.pagesize"
            background
            :page-sizes="[5, 10, 15, 20]"
            layout="prev, pager, next, sizes, jumper"
            :total="totals"
          >
          </el-pagination>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list } from '@/api/hmmm/subjects.js'
import dayjs from 'dayjs'
export default {
  data () {
    return {
      formInline: {
        user: '',
        region: ''
      },
      listDate: [],
      // 分页参数
      params: {
        page: 1,
        pagesize: 10
      },
      totals: 0
    }
  },
  created () {
    this.getSubjectslist()
  },
  methods: {
    dateFormat (str) {
      return dayjs(str).format('YYYY-MM-DD')
    },
    onSubmit () {
      console.log('submit!')
    },
    async getSubjectslist () {
      const res = await list(this.params)
      console.log(res)
      this.listDate = res.data.items
      console.log(res.data.items)
      this.totals = res.data.counts
    },
    handleSizeChange (newPage) {
      // console.log(`每页 ${newPage} 条`)
      this.params.pagesize = newPage
      this.getSubjectslist()
    },
    handleCurrentChange (newPage) {
      // console.log(`当前页: ${newPage}`)
      this.params.page = newPage
      this.getSubjectslist()
    },

    // 点击学科目录 跳转
    toDirectory (id) {
      console.log('跳转了')
      this.$router.push({
        path: 'directorys',
        query: {
          id
        }
      })
    },
    // 点击学科标签 跳转
    toTags (id) {
      console.log('跳转了')
      this.$router.push({
        path: 'tags',
        query: {
          id
        }
      })
    }

  }

}
</script>

<style scoped>
.bg-purple-light {
  background: #f0f2f5;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  font-size: 13px;
  color: #909399;
}
.el-icon-info {
  padding: 0 8px;
}
.el-table {
  margin-top: 15px;
}
</style>
